<template>
	<view>
		<block>
			<u-cell-item title="样机情况" :arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item style="padding: 0;" :arrow="false">
				<view class="u-m-20">
					<view class="samling-item" v-for="(item, index) in form.DealerVisitSellList" :key="index">
						<u-button v-if="!readonly" @tap="removeVisitSell(index)" type="error" size="mini" class="u-m-b-10">删除</u-button>
						<u-input
							type="select"
							:value="item.BrandName"
							:border="true"
							@tap="(showVisitSellPicker = true), (currentVisitSellIndex = index)"
							:selectOpen="showVisitSellPicker"
						></u-input>
						<u-input
							:value="item.productName"
							class="u-m-t-10"
							type="select"
							@tap="(showVisitSellProductPicker = true), (currentVisitSellIndex = index)"
							:selectOpen="showVisitSellProductPicker"
							:border="true"
						></u-input>
						<u-input class="u-m-t-10" type="number" :border="true" placeholder="数量" v-model="item.Number"></u-input>

						<u-gap bg-color="#f5f5f5" class="u-m-t-10 u-m-b-10" :height="10"></u-gap>
					</view>

					<view v-if="!readonly" class="u-text-right u-m-t-10 u-m-b-10 u-p-r-40"><u-button @tap="addVisitSell" type="warning" size="mini">添加BDR样机情况</u-button></view>
				</view>
			</u-cell-item>
		</block>

		<block>
			<u-cell-item title="竞品出样情况" :arrow="false" :border-bottom="false">
				<u-radio-group v-model="form.Sampling" :disabled="readonly">
					<u-radio name="1">是</u-radio>
					<u-radio name="2">否</u-radio>
				</u-radio-group>
			</u-cell-item>

			<u-cell-item title="" style="padding: 0;" :arrow="false">
				<view class="u-m-20" v-if="form.Sampling == 1">
					<view class="samling-item" v-for="(item, index) in form.DealerSamplingSellList" :key="index">
						<u-button v-if="!readonly" @tap="removeSampling(index)" type="error" size="mini" class="u-m-b-10">删除</u-button>
						<u-input v-model="item.BrandName" :border="true"></u-input>
						<u-input v-model="item.ProductModel" class="u-m-t-10" :border="true"></u-input>
						<u-input class="u-m-t-10" type="number" :border="true" placeholder="数量" v-model="item.Number"></u-input>

						<u-gap bg-color="#f5f5f5" class="u-m-t-10 u-m-b-10" :height="10"></u-gap>
					</view>

					<view v-if="!readonly" class="u-text-right u-m-t-10 u-m-b-10 u-p-r-40"><u-button @tap="addSampling" type="warning" size="mini">添加竞品样机</u-button></view>
				</view>
			</u-cell-item>
		</block>

		<block v-if="showDoubleSupply">
			<u-cell-item title="是否经营两联供" :arrow="false">
				<u-radio-group v-model="form.DoubleSupply">
					<u-radio :name="1">是</u-radio>
					<u-radio :name="2">否</u-radio>
				</u-radio-group>
			</u-cell-item>
			<block v-if="form.DoubleSupply == 1">
				<u-cell-item title="两联供品牌" :arrow="false">
					<u-checkbox-group @change="onDoubleSupplyChange">
						<u-checkbox v-for="(item, index) in DataBaseInfo.CompetingGoodsBrandDoubleSupply" :key="index" v-model="item.checked" :name="item.Key">{{ item.Value }}</u-checkbox>
					</u-checkbox-group>
				</u-cell-item>
				<u-cell-item title="其他品牌" :arrow="false"><u-input inputAlign="right" v-model="form.OtherBrand" placeholder="其他品牌"></u-input></u-cell-item>
			</block>
		</block>
		
		
		<u-select
			@confirm="onPickerChange($event, currentSamplingIndex)"
			:default-value="[
				this.form.DealerSamplingSellList[currentSamplingIndex] ? this.form.DealerSamplingSellList[currentSamplingIndex].brandIndex : -1
			]"
			v-model="showBrandPicker"
			:list="DataBaseInfo.CompetingGoodsBrandA_BaseList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		
		<u-select
			@confirm="onVisitSellPickerChange($event, currentVisitSellIndex)"
			:default-value="[form.DealerVisitSellList[currentVisitSellIndex] ? form.DealerVisitSellList[currentVisitSellIndex].brandIndex : -1]"
			v-model="showVisitSellPicker"
			:list="DataBaseInfo.CompetingGoodsBrandA_BaseList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		
		<u-select
			@confirm="onProductPickerChange($event, currentSamplingIndex, 1)"
			:default-value="[0]"
			v-model="showProductPicker"
			:list="form.DealerSamplingSellList[currentSamplingIndex] ? form.DealerSamplingSellList[currentSamplingIndex].productList : []"
			label-name="Text"
			value-name="Id"
			safe-area-inset-bottom
		></u-select>
		
		<u-select
			@confirm="onProductPickerChange($event, currentVisitSellIndex, 2)"
			:default-value="[0]"
			v-model="showVisitSellProductPicker"
			:list="form.DealerVisitSellList[currentVisitSellIndex] ? form.DealerVisitSellList[currentVisitSellIndex].productList : []"
			label-name="Text"
			value-name="Id"
			safe-area-inset-bottom
		></u-select>
	</view>
</template>

<script>
export default {
	name: 'product-information',
	props: {
		showDoubleSupply: {
			type: Boolean,
			default: false
		},
		readonly: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			
			DataBaseInfo: {
				CompetingGoodsBrandA_BaseList: [],
				CompetingGoodsBrandDoubleSupply: []
			},
			
			showBrandPicker: false,
			
			currentSamplingIndex: 0,
			
			showProductPicker: false,
			
			showVisitSellProductPicker: false,
			
			productOptions: [],
			
			currentVisitSellIndex: 0,
			showVisitSellPicker: false,
			
			form: {
				// 竞品出样情况
				Sampling: '',
				DealerVisitSellList: [],
				DealerSamplingSellList: [],
				DoubleSupply: '',
				DoubleSupplyString: '',
				OtherBrand: '',
			}
		};
	},
	
	
	methods: {
		
		init(data) {
			// if(data.dealerId) {
			// 	this.getDoorVisitInfo(data.dealerId);
			// }
			
			if(data.DataBaseInfo) {
				this.DataBaseInfo = data.DataBaseInfo;
			}
			
			if(data.DealerSamplingSellList) {
				this.form.DealerSamplingSellList = data.DealerSamplingSellList
			}
			if(data.DealerVisitSellList) {
				this.form.DealerVisitSellList = data.DealerVisitSellList.map((item, index) => {
					let brand = this.DataBaseInfo.CompetingGoodsBrandA_BaseList.find(i => i.Key == item.Brand);
					return {
						BrandName: brand.Value,
						BrandId: item.Brand,
						ProductId: item.ProductId,
						ProductModel: item.ProductModel,
						productName: item.ProductModel,
						Number: item.Number,
						brandIndex: -1,
						productIndex: -1,
						productList: []
					};
				});
			}
			
			this.form.Sampling = data.Sampling;
			this.form.DoubleSupply = data.DoubleSupply;
			this.form.DoubleSupplyString = data.DoubleSupplyString;
			this.form.OtherBrand = data.OtherBrand;
			
			console.log(this.form)
		},
		
		
		onDoubleSupplyChange(e) {
			this.form.DoubleSupplyString = this.DataBaseInfo.CompetingGoodsBrandDoubleSupply
				.filter(item => item.checked)
				.map(item => item.Key)
				.toString();
		},
		
		onProductPickerChange(e, listIndex, type) {
			let productId;
			if (e[0].label && e[0].value) {
				productId = e[0].value;
			} else {
				if (type == 1) {
					productId = this.form.DealerSamplingSellList[listIndex].productList[0].Id;
				}
				if (type == 2) {
					productId = this.form.DealerVisitSellList[listIndex].productList[0].Id;
				}
			}
		
			if (type == 1) {
				let productList = this.form.DealerSamplingSellList[listIndex].productList;
				let productIndex = productList.findIndex(item => item.Id == productId);
				if (productIndex > -1) {
					this.form.DealerSamplingSellList[listIndex].productIndex = productIndex;
					this.form.DealerSamplingSellList[listIndex].productName = productList[productIndex].Text;
					this.form.DealerSamplingSellList[listIndex].ProductModel = productList[productIndex].Text;
				}
			}
		
			if (type == 2) {
				let productList = this.form.DealerVisitSellList[listIndex].productList;
				let productIndex = productList.findIndex(item => item.Id == productId);
				if (productIndex > -1) {
					this.form.DealerVisitSellList[listIndex].productIndex = productIndex;
					this.form.DealerVisitSellList[listIndex].productName = productList[productIndex].Text;
					this.form.DealerVisitSellList[listIndex].ProductId = productList[productIndex].Id;
				}
			}
		},
		
		onVisitSellPickerChange(e, visitSellIndex) {
			let brandId, name;
			if (e[0].label && e[0].value) {
				name = e[0].label;
				brandId = e[0].value;
				this.form.DealerVisitSellList[visitSellIndex].brandIndex = this.DataBaseInfo.CompetingGoodsBrandA_BaseList.findIndex(item => item.Key == e[0].value);
				this.form.DealerVisitSellList[visitSellIndex].BrandName = name;
				this.form.DealerVisitSellList[visitSellIndex].BrandId = brandId;
			} else {
				name = this.DataBaseInfo.CompetingGoodsBrandA_BaseList[0].Value;
				brandId = this.DataBaseInfo.CompetingGoodsBrandA_BaseList[0].Key;
				this.form.DealerVisitSellList[visitSellIndex].brandIndex = 0;
				this.form.DealerVisitSellList[visitSellIndex].BrandName = name;
				this.form.DealerVisitSellList[visitSellIndex].BrandId = brandId;
			}
			this.getDoorVisitBrandProductList(brandId, visitSellIndex, 2);
		},
		
		onPickerChange(e, samplingIndex) {
			let brandId, name;
			if (e[0].label && e[0].value) {
				name = e[0].label;
				brandId = e[0].value;
				this.form.DealerSamplingSellList[samplingIndex].brandIndex = this.DataBaseInfo.CompetingGoodsBrandA_BaseList.findIndex(item => item.Key == e[0].value);
				this.form.DealerSamplingSellList[samplingIndex].BrandName = name;
			} else {
				name = this.DataBaseInfo.CompetingGoodsBrandA_BaseList[0].Value;
				brandId = this.DataBaseInfo.CompetingGoodsBrandA_BaseList[0].Key;
				this.form.DealerSamplingSellList[samplingIndex].brandIndex = 0;
				this.form.DealerSamplingSellList[samplingIndex].BrandName = name;
			}
			this.getDoorVisitBrandProductList(brandId, samplingIndex, 1);
		},
		
		removeSampling(index) {
			this.form.DealerSamplingSellList.splice(index, 1);
		},
		
		removeVisitSell(index) {
			this.form.DealerVisitSellList.splice(index, 1);
		},
		
		addSampling() {
			this.form.DealerSamplingSellList.push({
				BrandName: '',
				BrandId: '',
				ProductModel: '',
				productName: '',
				Number: '',
				brandIndex: -1,
				productIndex: -1,
				productList: []
			});
		},
		
		addVisitSell() {
			this.form.DealerVisitSellList.push({
				BrandName: '',
				BrandId: '',
				ProductId: '',
				productName: '',
				Number: '',
				brandIndex: -1,
				productIndex: -1,
				productList: []
			});
		},
		
		getDoorVisitBrandProductList(brandId, listIndex, type) {
			this.$u.api
				.getDoorVisitBrandProductList({
					BrandId: brandId
				})
				.then(res => {
					console.log(res);
					const { ResultCode, LogisticsList } = res;
					if (ResultCode == 0) {
						if (type == 1) {
							this.form.DealerSamplingSellList[listIndex].productList = LogisticsList;
						}
						if (type == 2) {
							this.form.DealerVisitSellList[listIndex].productList = LogisticsList;
						}
					}
				});
		},
		
		
		getDoorVisitInfo(dealerId) {
			this.$u.api
				.getDoorVisitInfo({
					DealerId: dealerId
				})
				.then(res => {
					if (res.DealerVisit_Sell) {
						this.form.DealerVisitSellList = res.DealerVisit_Sell.map((item, index) => {
							let brand = this.DataBaseInfo.CompetingGoodsBrandA_BaseList.find(i => i.Key == item.Brand);
		
							return {
								BrandName: brand.Value,
								BrandId: item.Brand,
								ProductId: item.ProductId,
								ProductModel: item.ProductModel,
								productName: item.ProductModel,
								Number: item.Number,
								brandIndex: -1,
								productIndex: -1,
								productList: []
							};
						});
					}
				});
		},
	}
};
</script>

<style lang="scss"></style>
